<template>
	<view>
		<view class="tabbar_after_box">
			<view class="after"></view>
		</view>
		<view class="tabbar_box">
			<view class="tabbar">
				<view class="label" v-for="(item, index) in template.tabbarList" :key="index" @click.stop="selectTabbarTap(index)">
					<view class="icons">
						<view v-if="current != index ">
							<view class="iconfont"  v-if="item.iconDefaultImage"
							 :class="['icon'+'-'+item.iconDefaultImage]":style="{ color: current === index ? template.page.themeColor : template.page.auxiliaryColor }">
							</view>
							<image style="width: 52rpx;height: 52rpx;" v-else :src="item.defaultImage" mode=""></image>
						</view>
						<view class=""  v-else>
							<view class="iconfont"  v-if="item.iconSelectImage"
							 :class="['icon'+'-'+item.iconSelectImage]" :style="{ color: current === index ? template.page.themeColor : template.page.auxiliaryColor }">
							</view>
							<image  style="width: 52rpx;height: 52rpx;" v-else :src="item.selectImage" mode=""></image>
						</view>
						<view class="num" v-if="index==3" :style="{ background: index == 3 ? template.page.themeColor : template.page.auxiliaryColor }">{{cart}}</view>
					</view>
					<view class="name" :style="{ color: current === index ? template.page.themeColor : template.page.auxiliaryColor }">
						{{ item.iconName }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'tabbar',
		props: {
			current: {
				type: Number,
				default: 0
			},
			cart: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState('template_store', ['template']),
		},
		methods: {
			selectTabbarTap(index) {
				let path = this.template.tabbarList[index].iconPath;
				uni.switchTab({ url: path });
			}
		}
	};
</script>

<style lang="less">
	.iconfont {
	  width: 1em;
	  height: 1em;
	  font-size: 48rpx;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	}
.tabbar_after_box {
	width: 100%;
	padding-bottom: env(safe-area-inset-bottom);
	.after {
		width: 100%;
		height: 120rpx;
	}
}
.tabbar_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #fff;
	padding-bottom: env(safe-area-inset-bottom);
	
	.tabbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		width: 100%;
		.label {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.icons {
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.num {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					background-color: #f54319;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100%;
					right: -14rpx;
					top: -10rpx;
					font-size: 24rpx;
				}
			}
			.name {
				font-size: 28rpx;
			}
		}
	}
}
</style>
